<!DOCTYPE html >
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="keywords"  content = "图书 java jsp"/>
    <meta http-equiv="author" content="phenix"/>
    <link rel="stylesheet" type="text/css" href="./Style/skin.css" />
    <script src="./Js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./Plugins/axios.min.js"></script>
    <script type="text/javascript" src="./Js/request.js"></script>
    <script>
        let current = 1;
        let size = 5;

        const deleteBook = (id) => {
            window.$axios.request({
                url: `book/delete.auth`,
                method: 'get',
                params: {
                    id
                }
            }).then(res => {
                if (res.code === 200) {
                    alert('删除成功')
                    getPageInfo(current, size)
                } else {
                    alert('删除失败')
                }
            })
        }

        const getPageInfo = (pageNum, pageSize) => {
            window.$axios.request({
                url: `book/page/${pageNum}/${pageSize}.auth`,
                method: 'get'
            }).then(res => {
                const page = res.data;

                let tableData = '';
                page.records.forEach(book => {
                    tableData += `<tr align="center" class="d">
                                    <td><a href="book_details.html">${book.id}</a></td>
                                    <td>${book.name}</td>
                                    <td>${book.typeName}</td>
                                    <td>${book.author}</td>
                                    <td>${book.publish}</td>
                                    <td>${book.stock}</td>
                                    <td>
                                        <a href="/book_modify.html?id=${book.id}">修改</a>&nbsp;&nbsp;
                                        <a href="javascript:void(0)" onclick="deleteBook(${book.id})">删除</a>
                                    </td>
                                </tr>`
                })
                $('#tableData').html(tableData)

                let pageNum = page.pageNum;
                let pageSize = page.pageSize;
                let totalPage = page.totalPage;
                let totalRow = page.totalRow;

                current = pageNum;
                size = pageSize;

                let pager = '';
                pager += current <= 1 ? `<li><a href="#">上一页</a></li>` : `<li><a href="javascript:void(0)" onclick="getPageInfo(${current-1},${size})">上一页</a></li>`;
                for (let i = 1; i <= totalPage; i++) {
                    if (i === current) {
                        pager += `<li class="current">${i}</li>`;
                    } else {
                        pager += `<li><a href="javascript:void(0)" onclick="getPageInfo(${i}, ${size})">${i}</a></li>`;
                    }
                }
                pager += current >= totalPage ? `<li><a href="#">下一页</a></li>` : `<li><a href="javascript:void(0)" onclick="getPageInfo(${current+1}, ${size})">下一页</a></li>`;
                $('#pager').html(pager)
            })
        }

        $(() => {
            getPageInfo(current, size)
        })
    </script>
</head>
    <body>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!-- 头部开始 -->
            <tr>
                <td width="17" valign="top" background="./Images/mail_left_bg.gif">
                    <img src="./Images/left_top_right.gif" width="17" height="29" />
                </td>
                <td valign="top" background="./Images/content_bg.gif">
                    
                </td>
                <td width="16" valign="top" background="./Images/mail_right_bg.gif"><img src="./Images/nav_right_bg.gif" width="16" height="29" /></td>
            </tr>
            <!-- 中间部分开始 -->
            <tr>
                <!--第一行左边框-->
                <td valign="middle" background="./Images/mail_left_bg.gif">&nbsp;</td>
                <!--第一行中间内容-->
                <td valign="top" bgcolor="#F7F8F9">
                    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                        <!-- 空白行-->
                        <tr><td colspan="2" valign="top">&nbsp;</td><td>&nbsp;</td><td valign="top">&nbsp;</td></tr>
                        <tr>
                            <td colspan="4">
                                <table>
                                    <tr>
                                        <td width="100" align="center"><img src="./Images/mime.gif" /></td>
                                        <td valign="bottom"><h3 style="letter-spacing:1px;">书籍管理 > 书籍列表 </h3></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <!-- 一条线 -->
                        <tr>
                            <td height="40" colspan="4">
                                <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                    <tr><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <!-- 产品列表开始 -->
                        <tr>
                            <td width="2%">&nbsp;</td>
                            <td width="96%">
                                <table width="100%">
                                    <tr>
                                        <td colspan="2">
                                            <form action="" method="">
                                                <table width="100%"  class="cont tr_color">
                                                    <tr>
                                                        <th>编号</th>
                                                        <th>名称</th>
                                                        <th>类型</th>
                                                        <th>作者</th>
                                                        <th>出版社</th>
                                                        <th>库存</th>
                                                        <th>操作</th>
                                                    </tr>
                                                    <tbody id="tableData"></tbody>
                                                   <tr><td colspan="8" align="center">
                                                    <div class="pager">
                                                        <ul class="clearfix" id="pager">
                                                            <li><a href="#">上一页</a></li>
                                                            <li class="current">1</li>
                                                            <li><a href="#">2</a></li>
                                                            <li><a href="#">3</a></li>
                                                            <li><a href="#">4</a></li>
                                                            <li><a href="#">5</a></li>
                                                            <li><a href="#">下一页</a></li>
                                                        </ul>
                                                    </div>
                                                   </td></tr>
                                                </table>
                                            </form>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="2%">&nbsp;</td>
                        </tr>
                        <!-- 产品列表结束 -->
                        <tr>
                            <td height="40" colspan="4">
                                <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                    <tr><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td width="2%">&nbsp;</td>
                            <td width="51%" class="left_txt">
                                <img src="./Images/icon_mail.gif" width="16" height="11"> 客户服务邮箱：lyxy123@qq.com<br />
                            </td>
                            <td>&nbsp;</td><td>&nbsp;</td>
                        </tr>
                    </table>
                </td>
                <td background="./Images/mail_right_bg.gif">&nbsp;</td>
            </tr>
            <!-- 底部部分 -->
            <tr>
                <td valign="bottom" background="./Images/mail_left_bg.gif">
                    <img src="./Images/buttom_left.gif" width="17" height="17" />
                </td>
                <td background="./Images/buttom_bgs.gif">
                    <img src="./Images/buttom_bgs.gif" width="17" height="17">
                </td>
                <td valign="bottom" background="./Images/mail_right_bg.gif">
                    <img src="./Images/buttom_right.gif" width="16" height="17" />
                </td>           
            </tr>
        </table>
    </body>
</html>